<template>
		<div style="margin-top: 10px">
				<el-row type="flex" justify="space-between">
						<el-col :span="16">
								员工名称:
								<el-input prefix-icon="el-icon-search" type="text" v-model="queryForm.name"
																		style="width: 30%;margin-right: 1%"
																		size="small" :clearable="true"
																		placeholder="请输入员工名进行搜索..." @keydown.enter.native="resetPageNum"></el-input>
								入职日期:
								<el-date-picker
												size="small"
												style="width: 30%;margin-right: 1%"
												v-model="queryTime"
												type="daterange"
												range-separator="至"
												start-placeholder="开始日期"
												end-placeholder="结束日期"
												value-format="yyyy-MM-dd"
												@change="resetPageNum">
								</el-date-picker>
								<el-button type="primary" icon="el-icon-search" style="width: 8%" @click="resetPageNum" size="small">搜索
								</el-button>
								<el-button type="danger" icon="el-icon-delete" size="small" style="width: 8%"
																			:disabled="selectedEmpIds.length === 0" @click="deleteBatchEmpByIds">批量删除
								</el-button>
						</el-col>
						<el-col :span="8" style="display: flex;justify-content: flex-end">
								<el-button type="success" icon="el-icon-sort-up" style="width:18%;margin-right: 3%" size="small"
																			@click="exportEmpData">导出数据
								</el-button>
								<el-upload
												:disabled="importDataBtnDisable"
												:show-file-list="false"
												style="width: 18%;margin-right: 3%"
												:before-upload="beforeUpload"
												:on-success="uploadSuccess"
												:on-error="onError"
												:action="importUrl">
										<el-button type="success" :disabled="importDataBtnDisable" :icon="importDataBtnIcon" size="small">
												{{ importDataBtnText }}
										</el-button>
								</el-upload>
								<el-button type="primary" icon="el-icon-plus" style="width: 18%" @click="saveEmpDialog" size="small">添加员工
								</el-button>
						</el-col>
				</el-row>
				<el-row>
						<el-table
										size="small"
										v-loading="loadingData"
										:data="empData"
										style="width: 100%"
										:border="true"
										height="650"
										@selection-change="multipleSelection">
								<el-table-column align="center" type="selection" fixed="left" width="55"></el-table-column>
								<el-table-column width="120" prop="name" fixed="left" align="center" label="姓名"></el-table-column>
								<el-table-column width="60" prop="gender" align="center" label="性别"></el-table-column>
								<el-table-column width="120" prop="workID" align="center" label="工号"></el-table-column>
								<el-table-column width="120" prop="birthday" align="center" label="出生日期"
																									:formatter="timeFormat"></el-table-column>
								<el-table-column width="120" :show-overflow-tooltip="true" prop="idCard" align="center"
																									label="身份证号码"></el-table-column>
								<el-table-column prop="wedlock" align="center" label="婚姻状况"></el-table-column>
								<el-table-column prop="nation.name" align="center" label="民族"></el-table-column>
								<el-table-column prop="nativePlace" align="center" label="籍贯"></el-table-column>
								<el-table-column width="180" prop="address" align="center" label="地址"></el-table-column>
								<el-table-column width="100" prop="politicsstatus.name" align="center" label="政治面貌"></el-table-column>
								<el-table-column width="180" prop="email" align="center" label="邮件"></el-table-column>
								<el-table-column width="120" prop="phone" align="center" label="手机号"></el-table-column>
								<el-table-column prop="department.name" align="center" label="部门"></el-table-column>
								<el-table-column width="120" prop="position.name" align="center" label="职位"></el-table-column>
								<el-table-column width="120" prop="jObLevel.name" align="center" label="职称等级"></el-table-column>
								<el-table-column prop="engageForm" align="center" label="聘用形式"></el-table-column>
								<el-table-column width="120" prop="beginDate" align="center" :show-overflow-tooltip="true"
																									label="入职日期"></el-table-column>
								<el-table-column width="120" prop="conversionTime" align="center" :show-overflow-tooltip="true"
																									label="转正日期"></el-table-column>
								<el-table-column width="180" prop="beginContract" align="center" label="合同起始日期"></el-table-column>
								<el-table-column width="180" prop="endContract" align="center" label="合同终止日期"></el-table-column>
								<el-table-column width="100" prop="contractTerm" align="center" label="合同期限">
										<template slot-scope="scope">
												<el-tag>{{ scope.row.contractTerm }}年</el-tag>
										</template>
								</el-table-column>
								<el-table-column prop="tiptopDegree" align="center" label="最高学历"></el-table-column>
								<el-table-column width="150" prop="school" align="center" label="毕业院校"></el-table-column>
								<el-table-column width="150" prop="specialty" align="center" label="专业"></el-table-column>
								<el-table-column width="200" align="center" label="操作" fixed="right">
										<template slot-scope="scope">
												<el-button type="info" size="mini" style="padding: 2px" @click="editEmp(scope.row)">编辑</el-button>
												<el-button type="primary" size="mini" style="padding: 2px">查看高级资料</el-button>
												<el-button type="danger" size="mini" style="padding: 2px" @click="deleteEmp(scope.row)">删除</el-button>
										</template>
								</el-table-column>
						</el-table>
						<el-pagination
										background
										@current-change="pageNumChange"
										@size-change="sizeChange"
										layout="sizes, prev, pager, next, jumper, ->, total, slot"
										:total="queryForm.total">
						</el-pagination>
				</el-row>
				<EmpBasicAddOrUpdate ref="empBasicAddOrUpdate" @refreshEmpTable="init"></EmpBasicAddOrUpdate>
		</div>
</template>

<script>
import EmpBasicAddOrUpdate from "@/views/emp/EmpBasicAddOrUpdate";

export default {
		name: "EmpBasic",
		data() {
				return {
						empData: [],
						loadingData: false,
						importDataBtnText: '导入数据',
						importDataBtnDisable: false,
						importDataBtnIcon: 'el-icon-sort-down',
						importUrl: '/emp/basic/importExcel',
						queryForm: {
								total: 0,
								pageNum: 1,
								pageSize: 10,
								name: '',
								startTime: '',
								endTime: '',
						},
						queryTime: [],
						selectedEmpIds: [],
				}
		},
		components: {
				EmpBasicAddOrUpdate
		},
		mounted() {
				this.init()
		},
		methods: {
				init() {
						this.listEmpPages()
				},

				resetPageNum() {
						this.queryForm.pageNum = 1;
						debugger
						if (this.queryTime instanceof Array && this.queryTime.length !== 0) {
								this.queryForm.startTime = this.queryTime[0];
								this.queryForm.endTime = this.queryTime[1];
						} else {
								this.queryForm.startTime = ''
								this.queryForm.endTime = ''
						}
						this.listEmpPages()
				},

				// 初始化员工数据
				listEmpPages() {
						this.loadingData = true;
						this.$get("/emp/basic/listEmpPages", this.queryForm).then(res => {
								const {data} = res;
								this.empData = data.data
								this.loadingData = false;
								this.queryForm.total = data.total * 1;
						}).catch(error => {

						})
				},
				// 翻页事件
				pageNumChange(pageNum) {
						this.queryForm.pageNum = pageNum;
						this.listEmpPages();
				},

				// 修噶size大小
				sizeChange(pageSize) {
						this.queryForm.pageSize = pageSize;
						this.listEmpPages();
				},

				// 格式化表格时间
				timeFormat(row, column) {
						return this.$dayjs(row.birthday).format('YYYY-MM-DD');
				},

				// 显示用户添加/修改弹窗
				saveEmpDialog() {
						this.$refs.empBasicAddOrUpdate.showDialog(true)
				},

				// 编辑员工
				editEmp(emp) {
						this.$refs.empBasicAddOrUpdate.showDialog(false)
						this.$refs.empBasicAddOrUpdate.loadEmpInfo(emp)
				},

				// 删除员工
				deleteEmp(emp) {
						this.$confirm(`是否确认删除【${emp.name}】?`).then(res => {
								this.$del("/emp/basic/deleteEmp", emp.id).then(res => {
										const {code} = res;
										if (code === 200) {
												this.listEmpPages()
										}
								})
						}).catch(error => {

						})
				},

				// 导出数据
				exportEmpData() {
						window.open(`/emp/basic/exportEmp?startTime=${this.queryForm.startTime}&endTime=${this.queryForm.endTime}`, "_parent")
				},
				beforeUpload(file) {
						console.log(file)
						console.log('upload')
						this.importDataBtnIcon = "el-icon-loading"
						this.importDataBtnText = "正在上传"
						this.importDataBtnDisable = true
				},
				uploadSuccess(res, file, fileList) {
						if (res.code === 200) {
								console.log(res)
								console.log(file)
								console.log(fileList)
								this.importDataBtnIcon = "el-icon-success"
								this.importDataBtnText = "上传成功"
								setTimeout(() => {
										this.importDataBtnIcon = "el-icon-sort-down"
										this.importDataBtnDisable = false
										this.importDataBtnText = "导入数据"
										this.listEmpPages();
								}, 2000)
						} else {
								this.importDataBtnIcon = "el-icon-error"
								this.importDataBtnText = "导入异常"
								this.$message.error(res.message);
								setTimeout(() => {
										this.importDataBtnIcon = "el-icon-sort-down"
										this.importDataBtnDisable = false
										this.importDataBtnText = "导入数据"
										this.listEmpPages();
								}, 2000)
						}
				},
				onError(res, file, fileList) {
						this.importDataBtnIcon = "el-icon-sort-down"
						this.importDataBtnText = "导入数据"
						this.importDataBtnDisable = false
				},

				multipleSelection(row) {
						this.selectedEmpIds = row.map(item => item.id)
				},

				deleteBatchEmpByIds() {
						this.$confirm(`是否确认删除【${this.selectedEmpIds.length}】条数据`).then(res => {
								this.$del("/emp/basic/deleteBatchEmpByIds", this.selectedEmpIds).then(res => {
										const {code} = res;
										if (code === 200) {
												this.queryForm.pageNum -= this.queryForm.pageNum
												this.listEmpPages()
										}
								})
						}).catch(error => {

						})
				}
		},
}
</script>

<style scoped>

</style>
